<script setup lang="ts">
import LayoutHeader from './components/LayoutHeader/index.vue'
import LayoutAside from './components/LayoutAside/index.vue'
import LayoutTab from './components/LayoutTab/index.vue'
import useCurrentTime from '../hooks/useCurrentTime'

const { currentTime } = useCurrentTime()

const isCollapse = ref(false)

const changeCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<template>
  <el-container class="bodyer">
      <el-aside class="aside" width="auto">
        <LayoutAside :collapse="isCollapse" />
      </el-aside>
      <el-main class="boxer">
        <el-header>
          <LayoutHeader :currentTime="currentTime" @handleCollapse="changeCollapse" />
        </el-header>
        <LayoutTab />
        <el-main class="routerMain">
          <router-view v-slot="{ Component, route }">
            <Transition name="fade">
              <component :is="Component" :key="route.path" />
            </Transition>
          </router-view>
        </el-main>
      </el-main>
  </el-container>
</template>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bodyer {
  height: 100vh;
  display: flex;
  align-items: center;
  .aside {
    height: 100%;
  }
  .boxer {
    width: 100%;
    height: 100%;
    flex: 1;
    .routerMain {
      width: 100%;
      height: calc(100% - 36px - 60px);
    }
  }

}

// .fade-enter-active,
// .fade-leave-active {
//   transition: opacity 0.5s ease;
// }

// .fade-enter-from,
// .fade-leave-to {
//   opacity: 0;
// }

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>
